<template>
  <div class='content'>
    <el-row type='flex' justify='space-between' align='middle' class='searchBox'>
      <el-col :span='20'>
        <el-row type='flex' justify='start'>
          <el-col :span='6'>
            用户姓名:
            <el-input
              size='small'
              style='width: 200px'
              v-model='userModel.name'
              placeholder='用户姓名'
              clearable
            />
          </el-col>
        </el-row>
      </el-col>
      <el-col :span='4'>
        <el-button type='primary' size='small' @click='search'>搜索</el-button>
        <el-button type='primary' size='small' @click='addUser'>添加</el-button>
      </el-col>
    </el-row>

    <el-card>
      <el-table
        class='tableForm'
        :data='userData'
        v-loading='userTableloading'
      >
        <el-table-column width='50' align='center' type="index" label="序号" :index="indexMethod"></el-table-column>

        <el-table-column
          prop='username'
          label='账号'
          align='center'
        ></el-table-column>

        <el-table-column
          prop='name'
          label='用户姓名'
          align='center'
        ></el-table-column>

        <el-table-column
          prop='roleName'
          label='所属角色'
          align='center'
        ></el-table-column>

        <el-table-column
          prop='phone'
          label='手机号码'
          align='center'
        ></el-table-column>

        <el-table-column
          prop='createdDate'
          label='创建时间'
          align='center'
        ></el-table-column>

        <el-table-column prop='enabled' label='状态' align='center'>
          <template slot-scope='scope'>
            <el-switch
              :active-value='true'
              :inactive-value='false'
              active-text='启用'
              inactive-text='禁用'
              v-model='scope.row.enabled'
              @change='userStatusChange(scope.row)'
            ></el-switch>
          </template>
        </el-table-column>

        <el-table-column fixed='right' label='操作' align='center'>
          <template slot-scope='scope'>
            <el-button @click='editUser(scope.row)' type='text' size='mini'>编辑</el-button>
            <el-button @click='delUser(scope.row)' type='text' size='mini'>删除</el-button>
            <el-button type='text' size='mini' @click='resetPsd(scope.row)'>重置密码</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change='handleSizeChange'
        @current-change='handleCurrentChange'
        :current-page='userModel.current'
        :page-sizes='[10, 20, 30]'
        :page-size='userModel.size'
        layout='total, sizes, prev, pager, next, jumper'
        :total='userModel.total'
      ></el-pagination>
    </el-card>

    <!-- 添加用户弹框 -->
    <addUser v-if='addUserVisible'></addUser>

    <!-- 编辑弹框 -->
    <editUser v-if='editUserVisible' :editData='editItem'></editUser>
  </div>
</template>
<script>
import addUser from './user/addUser';
import editUser from './user/editUser';

export default {
  components: {
    addUser,
    editUser,
  },
  data() {
    return {
      userData: [],
      userTableloading: false,
      userModel: {
        name: '',
        username: '',
        phone: '',
        startTime: '',
        endTime: '',
        current: 1,
        size: 10,
        total: 0,
      },
      //添加用户
      addUserVisible: false,
      //编辑用户
      editUserVisible: false,
      editItem: {},
    };
  },
  created() {
    this.search();
  },
  mounted() {
    this.$ge.$on('sys-user-change-search', () => {
      this.search();
    });
  },
  methods: {
    // 分页 ( 当页数量改变 )
    handleSizeChange(val) {
      this.userModel.size = val;
      this.search();
    },
    // 分页 （ 页码改变 ）
    handleCurrentChange(val) {
      this.userModel.current = val;
      this.search();
    },
    //查询用户列表
    search() {
      this.userTableloading = true;
      this.$get('/user/pageList', this.userModel)
        .then((result) => {
          if (result.code == 200 && result.data) {
            this.userData = result.data.records;

            this.userModel.size = result.data.size;
            this.userModel.total = result.data.total;
            this.userModel.current = result.data.current;
          }
          this.userTableloading = false;
        })
        .catch((error) => {
          //异常暂定为空
          this.userData = [];
          this.userTableloading = false;
        });
    },
    // 用户状态开关
    userStatusChange(row) {
      this.userTableloading = true;
      this.$postJson('/user/update', {
        id: row.id,
        enabled: row.enabled,
      })
        .then((result) => {
          if (result.code != 200) {
            this.$message.error(result.msg);
          }
          this.search();
          this.userTableloading = false;
        })
        .catch((error) => {
          //异常暂定为空
          this.$message.error('状态修改异常');
          this.userTableloading = false;
        });
    },
    //添加用户
    addUser() {
      this.addUserVisible = true;
      let that = this;
      this.$ge.$on('sys-user-close-addUser-finish', () => {
        that.addUserVisible = false;
      });
    },
    //编辑用户
    editUser(row) {
      this.editUserVisible = true;
      this.editItem = row;
      let that = this;
      this.$ge.$on('sys-user-close-editUser-finish', () => {
        that.editUserVisible = false;
      });
    },
    //删除用户
    delUser(row) {
      this.$confirm(
        '已选中账号：' + row.username + '，删除账号后无法恢复是否确认删除？',
        '删除提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        },
      )
        .then(() => {
          if (!row.id) {
            this.$message.warn('删除失败，用户不存在！');
            return null;
          }
          this.$postForm('/user/delete', {
            id: row.id,
          })
            .then((result) => {
              if (result.code == 200) {
                this.$message.success(result.msg);
                this.search();
              } else this.$message.error(result.msg);
            })
            .catch((error) => {
              //删除异常
              this.$message.error('删除异常');
            });
        })
        .catch(() => {
          //取消事件
        });
    },
    // 重置密码
    resetPsd(row) {
      let resetPsd = this.$BASE.resetPsd;
      this.$confirm(
        '密码重置后,原有密码失效,恢复初始密码' + resetPsd + ',是否继续？',
        '重置密码提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warn',
        },
      )
        .then(() => {
          if (!row.id) {
            this.$message.warn('重置密码失败，用户不存在！');
            return null;
          }
          this.$postJson('/user/resetPassword', {
            id: row.id,
            enabled: true,
          })
            .then((result) => {
              if (result.code == 200) {
                this.$message.success(result.msg);
                this.search();
              } else {
                this.$message.error(result.msg);
              }
            })
            .catch((error) => {
              //删除异常
              this.$message.error('重置密码异常');
            });
        })
        .catch(() => {
          //取消事件
        });
    },
  },
};
</script>
<style lang='scss' scoped>


</style>
